<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>示例</title>
</head>
<body>
    <!-- v-bind 主要用法是动态更新 HTML 元素上的属性 -->
    <div id="app1">
        <!-- 给 v-bind:class 设置一个对象，可以动态地切换 class -->
        <div :class="{ 'active': isActive }"></div>
        <!-- 显示 <div class="active"></div> -->

        <!--
            对象中可以传入多个属性来动态切换 class
            另外，:class 可以与普通 class 共存
         -->
        <div class="static" :class="{ 'active': isActive, 'error': isError }"></div>
        <!-- 显示  <div class="static active"></div>  -->


        <!--
            当 :class 的表达式过长或者逻辑复杂的时候，可以绑定一个计算属性，这是一种比较友好和常见的用法，一般当条件多于
            两个时，都可以使用 data、computed、methods 来实现
        -->
        <div :class="classes"></div>

    </div>

    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>

        var app1 = new Vue({
            el: "#app1",
            data: {
                isActive: true,
                isError: false
            },
            computed: {
                classes: function () {
                    return {
                        "active": this.isActive,
                        "error": this.isError
                    };
                }
            }
        });


    </script>

</body>
</html>